<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="judgment-manager">
    <div class="all_container">
      <div class="order_detail--container">
        <div class="order_detail--header">
          <div class="order_detail_left">
            <title-view :title="'判责单号：' + (detailDate.assignBlameNo || '')" />
            <div class="judgment-status" :class="getjStatusClass(detailDate?.assignBlameState)">
              {{ getjStatusLabel(detailDate?.assignBlameState) }}
            </div>
          </div>
          <el-button type="info" color="#F2F3F5" @click="handleGoto">返回上一页</el-button>
        </div>
        <div class="order_detail--title" v-if="detailDate.assignBlameState == 4 && titleleft !== '' && titleleft !== null">
          <div class="detail_title_item">拒绝理由：</div>
          <div class="detail_title_right">
            <show-more-text :text="titleleft"></show-more-text>
          </div>
        </div>
        <div class="order_detail--body">
          <div class="order_body--title" style="margin-top: 4px; margin-bottom: 14px">
            <div class="order_body--titleleft">判责信息</div>
            <div class="order_body--rightpztitle">
              <div class="order_body_rightpztitleone">
                预计判责总金额：
                <span style="color: #ff3333"> ¥{{ detailDate.actualAssignBlameAmount || 0 }}</span>
              </div>
              <div class="order_body--titleright">公司承担金额：¥{{ detailDate.companyBorneAmount || 0 }}</div>
            </div>
          </div>
          <div>
            <el-row class="table_head">
              <el-col :span="3" class="table_head--col">合作方类型</el-col>
              <el-col :span="3" class="table_head--col">责任人角色</el-col>
              <el-col :span="2" class="table_head--col">负责人</el-col>
              <el-col :span="3" class="table_head--col">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="`判责金额=判责比例*判责金额&nbsp;&nbsp;&nbsp判责比例:该责任人配置的判责比例&nbsp;&nbsp;&nbsp判责金额：报价变更单的售后单分类对应的判责金额取值总和`"
                  placement="top-start"
                >
                  判责金额(元)
                </el-tooltip>
              </el-col>
              <el-col :span="2" class="table_head--col">备注</el-col>
              <el-col :span="2" class="table_head--col">状态</el-col>
              <el-col :span="3" class="table_head--col">已核销金额</el-col>
              <el-col :span="3" class="table_head--col">判责时间</el-col>
              <el-col :span="3" class="table_head--col">确认/核实时间</el-col>
            </el-row>

            <div class="tablerow_body" v-for="item in judgemnetArry" :key="item.assignBlameId">
              <el-row style="margin-top: 10px">
                <el-col :span="3" class="tablerow_body--col">
                  <div class="tablerow_body--text">
                    {{ typeList[item.type - 1]}}
                  </div>
                </el-col>
                <el-col :span="3" class="tablerow_body--col">
                  <div class="tablerow_body--text">
                    {{ item.roleName }}
                  </div>
                </el-col>
                <el-col :span="2" class="tablerow_body--col">
                  <div class="tablerow_body--text ellipsis ">
                    <el-tooltip :content="item.userName || ''" placement="bottom" effect="light">
                      {{ item.userName || "" }}
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="3" class="tablerow_body--col">
                  <div class="tablerow_body--text">
                    {{ item.amount }}
                  </div>
                </el-col>
                <el-col :span="2" class="tablerow_body--col">
                  <!-- <div class="tablerow_body--text">
                    {{ item.note?.replace(/<\/?p>/g, "") }}
                  </div> -->
                  <div class="ellipsis tablerow_body--text">
                    <el-tooltip :content="item.note || ''" placement="bottom" effect="light">
                      {{ item.note?.replace(/<\/?p>/g, "") }}
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="2" class="tablerow_body--col">
                  <div class="tablerow_body--status" :class="gettabStatusClass(item.assignBlameState)">
                    {{ gettabStatusLabel(item.assignBlameState) }}
                  </div>
                </el-col>
                <el-col :span="3" class="tablerow_body--col">
                  <div class="tablerow_body--text">{{ item.clearedAmount || "" }}</div>
                </el-col>
                <el-col :span="3" class="tablerow_body--col">
                  <div class="tablerow_body--text">{{ item.createTime || "" }}</div>
                </el-col>
                <el-col :span="3" class="tablerow_body--col">
                  <div class="tablerow_body--text">{{ item.verifiedTime || "" }}</div>
                </el-col>
              </el-row>
              <div class="tablerow_body--foot" v-if="item.assignBlameState == 8">
                <div class="tablerow_body--foottext">拒绝理由：{{ item.operationContent }}</div>
                <div class="tablerow_body--footline"></div>
                <div class="tablerow_body--footbtn">
                  <div
                    @click="handleClick(v.url, 'img')"
                    class="tablerow_body--footbtnchild"
                    v-for="v in item?.imgdata"
                    :key="v.url"
                  >
                    <img src="@/assets/images/picture.png" style="margin-left: 10px" />
                    <el-tooltip :content="urlname(v.url)" placement="bottom" effect="light">
                      <div style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                        {{ urlname(v.url) }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div
                    class="tablerow_body--footbtnchild"
                    @click="handleClick(v.url, 'video')"
                    v-for="v in item?.videodata"
                    :key="v.url"
                  >
                    <img src="@/assets/images/video.png" style="margin-left: 10px" />
                    <el-tooltip :content="urlname(v.url)" placement="bottom" effect="light">
                      <div style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                        {{ urlname(v.url) }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>

              <div class="tablerow_body--footother" v-if="item.assignBlameState !== 8">
                <div style="color: #4e5969; margin-left: 12px">--</div>
              </div>
            </div>
          </div>

          <div class="add-order-container-white"></div>
          <div>
            <div class="order_body--title" style="margin-top: 24px">
              <div class="order_body--titleleft">需判责明细</div>
            </div>
            <div class="order_detail--titlenew">
              <div class="order_detail--amount">
                报价变更单：<span style="color: #007dff; cursor: pointer" @click="handleGotoline(detailDate.exchangeBudgetId)">{{
                  detailDate.exchangeBudgetId || "--"
                }}</span>
              </div>
              <div class="order_detail--dividernew"></div>
              <div class="order_detail--amount">给客户赔偿金额：¥{{ detailDate.customerCompensationAmount || "0" }}</div>
            </div>

            <div v-if="returnOrder.itemList.length !== 0">
              <div class="order_table--title">
                <div class="left">
                  <title-view title="退货单" :showTagCircle="false" />
                </div>
                <div class="sum">
                  <div>
                    （费用合计：<span style="color: #ff3333">¥{{ returnOrder.refundBudgetTotlalMoney || 0 }}</span>
                  </div>
                  <div>
                    管理费：<span>¥{{ returnOrder.refundManagerFee || 0 }}</span>
                  </div>
                  <div>
                    税费：<span>¥{{ returnOrder.refundTaxesFee || 0 }}</span>
                  </div>
                  <div>
                    综合项金额：<span>¥{{ returnOrder.refundCustomComprehensiveFee || 0 }}</span>
                  </div>
                  <div>
                    其他费用：<span>¥{{ returnOrder.refundOtherFee || 0 }}</span
                    >)
                  </div>
                </div>
              </div>
              <el-table
                :data="returnOrder.itemList"
                style="width: 100%"
                border
                :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
              >
                <el-table-column prop="serialNo" label="序号" />
                <el-table-column prop="mainPicUrl" label="图片">
                  <template #default="{ row }">
                    <el-image class="order_show--img" :src="row.mainPicUrl" :fit="fit" />
                  </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" />
                <el-table-column prop="brandName" label="品牌" />
                <el-table-column prop="modeCode" label="型号" />
                <el-table-column prop="productUnit" label="单位" />
                <el-table-column prop="num" label="退换数量" />
                <el-table-column prop="realCostMoney" label="成本价" />
                <el-table-column prop="realSaleMoney" label="实际售价" />
              </el-table>
            </div>

            <div v-if="replacementOrder.itemList.length !== 0">
              <div class="order_table--title">
                <div class="left">
                  <title-view title="换补单" :showTagCircle="false" />
                </div>
                <div class="sum">
                  <div>
                    （费用合计：<span style="color: #ff3333">¥{{ replacementOrder.budgetTotlalMoney || 0 }}</span>
                  </div>
                  <div>
                    管理费：<span>¥{{ replacementOrder.managerFee || 0 }}</span>
                  </div>
                  <div>
                    税费：<span>¥{{ replacementOrder.taxesFee || 0 }}</span>
                  </div>
                  <div>
                    综合项金额：<span>¥{{ replacementOrder.customComprehensiveFee || 0 }}</span>
                  </div>
                  <div>
                    其他费用：<span>¥{{ replacementOrder.otherFee || 0 }}</span>
                    )
                  </div>
                </div>
              </div>
              <el-table
                :data="replacementOrder.itemList"
                style="width: 100%; z-index: 0"
                border
                :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
              >
                <el-table-column prop="serialNo" label="序号" />
                <el-table-column prop="mainPicUrl" label="图片">
                  <template #default="{ row }">
                    <el-image class="order_show--img" :src="row.mainPicUrl" :fit="fit" />
                  </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" />
                <el-table-column prop="brandName" label="品牌" />
                <el-table-column prop="modeCode" label="型号" />
                <el-table-column prop="productUnit" label="单位" />
                <el-table-column prop="num" label="退换数量" />
                <el-table-column prop="realCostMoney" label="成本价" />
                <el-table-column prop="realSaleMoney" label="实际售价" />
              </el-table>
            </div>

            <div class="add-order-container-white"></div>
            <div>
              <div class="order_body--title" style="margin-top: 24px">
                <div class="order_body--titleleft">售后信息</div>
              </div>
              <el-row style="margin: 14px 0 0" class="order_detail--row">
                <el-col :span="4" class="order_detail--bgcorlor">售后单号</el-col>
                <el-col :span="8">
                  <div class="ellipsis">
                    <el-tooltip :content="detailDate.reformNo || ''" placement="bottom" effect="light">
                      {{ detailDate.reformNo || "" }}
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="4" class="order_detail--bgcorlor">状态</el-col>
                <el-col :span="8" class="order_detail--borderright">
                  <div class="reform-state" :class="getStatusClass(reformState)" v-if="reformState !== 10">
                    {{ getStatusLabel(reformState) }}
                  </div>
                  <div class="order_detail_showstatus" v-if="reformState == 10">
                    <div class="order_reform" :class="getStatusClass(reformState)">
                      {{ getStatusLabel(reformState) }}
                    </div>
                    <div class="rorder_detail_showstatusdown">
                      <el-tooltip :content="detailDate.refusalReason || ''" placement="bottom" effect="light">
                        拒绝理由: {{ detailDate.refusalReason }}
                      </el-tooltip>
                    </div>
                  </div>
                </el-col>

                <el-col :span="4" class="order_detail--bgcorlor">售后类型</el-col>
                <el-col :span="8">
                  <div class="ellipsis">
                    {{ detailDate.afterSalesType == 1 ? "整改" : "增减项" }}
                  </div>
                </el-col>
                <el-col :span="4" class="order_detail--bgcorlor">售后分类</el-col>
                <el-col :span="8" class="order_detail--borderright">
                  {{ detailDate.reformTypeName }}
                </el-col>

                <el-col :span="4" class="order_detail--borderbottom order_detail--bgcorlor">需退款金额</el-col>
                <el-col :span="8" class="order_detail--borderbottom">
                  <div class="ellipsis">
                    {{ detailDate.customerCompensationAmount || "" }}
                  </div>
                </el-col>
                <el-col :span="4" class="order_detail--borderbottom order_detail--bgcorlor">问题描述</el-col>
                <el-col :span="8" class="order_detail--borderbottom order_detail--borderright">
                  <el-tooltip :content="detailDate.reformDesc || ''" placement="bottom" effect="light">
                    {{ detailDate.reformDesc }}
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>

      <div class="operate_right">
        <div class="order_detail--header">
          <div class="order_detail_left">
            <title-view title="操作记录" />
          </div>
        </div>
        <div class="operate_right_dowm">
          <el-timeline style="max-width: 600px">
            <el-timeline-item
              :icon="MoreFilled"
              type="primary"
              size="large"
              v-for="(item, index) in operationRecords"
              :key="item.operationRecordsId"
            >
              <div class="operate_right_alltext">
                <div class="right_text_time">{{ item.createTime }}</div>
                <div style="display: flex; font-size: 12px; color: #c0c4cc">
                  <el-tooltip
                      :content="item.operationName == null ? '--' : item.operationName"
                      placement="bottom"
                      effect="light"
                  >
                    <div style="width: 62px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                      {{ item.operationName || "--" }}
                    </div>
                  </el-tooltip>
                  <div style="width: 12px; color: #c0c4cc; font-weight: 500">丨</div>
                  <el-tooltip
                    :content="item.operationRoleNames == null ? '--' : item.operationRoleNames"
                    placement="bottom"
                    effect="light"
                  >
                    <div style="width: 62px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                      {{ item.operationRoleNames || "--" }}
                    </div>
                  </el-tooltip>
                </div>
              </div>
              <div class="operate_right_lefttext">{{ showoperation(item.operation) }}</div>
              <div
                class="operate_right_card"
                v-show="
                  (item.operationContent && item.operation !== 9 && item.operation !== 5) ||
                  (item.picUrls && item.operation !== 9 && item.operation !== 5) ||
                  (item.videoUrls && item.operation !== 9 && item.operation !== 5)
                "
              >
                <div class="operate_right_cardcontent" ref="contentDom">
                  {{ item.operationContent }}
                </div>
                <div style="height: 12px; width: 100%"></div>

                <div class="operate_right_cardbutton" v-if="!item.showclick">
                  <div
                    @click="handleClick(v.url, 'img')"
                    class="operate_right_footbtnchild"
                    v-for="v in item?.imgdata"
                    :key="v.url"
                  >
                    <img src="@/assets/images/picture.png" style="margin-left: 10px" />
                    <el-tooltip :content="urlname(v.url)" placement="bottom" effect="light">
                      <div style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                        {{ urlname(v.url) }}
                      </div>
                    </el-tooltip>
                  </div>

                  <div
                    class="operate_right_footbtnchild"
                    @click="handleClick(v.url, 'video')"
                    v-for="v in item?.videodata"
                    :key="v.url"
                  >
                    <img src="@/assets/images/video.png" style="margin-left: 10px" />
                    <el-tooltip :content="urlname(v.url)" placement="bottom" effect="light">
                      <div style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                        {{ urlname(v.url) }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>

                <div @click="shouzhankaishouqi(item, false, index)" v-if="item.showclick == true" class="operate_right_state">
                  <div class="operate_right_statetext">展开</div>
                  <img src="@/assets/images/kai.png" />
                </div>
                <div @click="shouzhankaishouqi(item, true, index)" v-if="item.showclick == false" class="operate_right_state">
                  <div class="operate_right_statetext">收起</div>
                  <img src="@/assets/images/shou.png" />
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" align-center width="50%">
      <ImageVideoPreview :showtype="showtype" :url="url"></ImageVideoPreview>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { judgmentDetail } from "@/apis/judgment";
import { useRoute, useRouter } from "vue-router";
import showMoreText from "./showMoreText";
import { type } from "./config";
import ImageVideoPreview from "@/components/ImageVideoPreview";
import { MoreFilled } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const detailDate = ref({});
const typeList = ref(["客户", "供应商 ", "其他", "项目经理 ", "物流运输 ", "工人", "员工"]);
const returnOrder = ref({
  itemList: []
}); // 退货单
const replacementOrder = ref({
  itemList: []
}); // 换补单
const judgemnetArry = ref([
  {
    assignBlameState: 7,
    type: "员工",
    roleName: "设计师",
    partnerId: "asdas",
    userName: "负责人",
    amount: "￥5400",
    note: "备注"
  }
]);
const contentDom = ref();
const nameTitle = ref("整改");
const dialogVisible = ref(false);
const url = ref("");
const showtype = ref("");
const options = [
  {
    value: "Option1",
    label: "Option1"
  }
];
const judgmenMap = new Map([
  [1, ["warning", "未判责"]],
  [3, ["success", "已核实"]],
  [4, ["danger", "审批未通过"]],
  [5, ["warning", "待发起确认"]],
  [6, ["primary", "确认中"]],
  [7, ["success", "已确认"]],
  [8, ["danger", "责任人拒绝"]],
  [9, ["primary", "核实中"]],
  [10, ["primary", "审批中"]],
  [11, ["info", "已作废"]]
]);
// 获取状态 CSS 类名
const getjStatusClass = state => {
  const [statusClass] = judgmenMap.get(state) || ["danger", "--"];
  return `reform-state-${statusClass}`;
};
// 获取状态标签
const getjStatusLabel = state => {
  const [, statusLabel] = judgmenMap.get(state) || ["danger", "--"];
  return statusLabel;
};
// 获取状态 CSS 类名
const gettabStatusClass = state => {
  const [statusClass] = judgmenMap.get(state) || ["danger", "--"];
  return `statuscolor-${statusClass}`;
};
// 获取状态标签
const gettabStatusLabel = state => {
  const [, statusLabel] = judgmenMap.get(state) || ["danger", "--"];
  return statusLabel;
};
const urlname = url => {
  // 获取文件名和扩展名
  const fileNameWithExt = url.substring(url.lastIndexOf("/") + 1);
  // 提取文件扩展名
  const extension = fileNameWithExt.substring(fileNameWithExt.lastIndexOf("."));
  // 去掉扩展名部分，提取裸文件名
  const fileName = fileNameWithExt.substring(0, fileNameWithExt.lastIndexOf("."));
  // 解码URL编码的文件名
  const decodedFileName = decodeURIComponent(fileName);
  // 找到最后一个 '-' 的位置，通常附加标识符从这里开始
  const lastDashIndex = decodedFileName.lastIndexOf("-");
  // 去除附加标识符，重建文件名并添加扩展名
  const baseFileName = decodedFileName.substring(0, lastDashIndex).trim() + extension;
  return baseFileName;
};
const statusMap = new Map([
  [1, ["warning", "待审核"]],
  [2, ["warning", "待开始"]],
  [3, ["primary", "进行中"]],
  [4, ["success", "已完成"]],
  [5, ["danger", "未通过"]],
  [6, ["info", "已作废"]],
  [7, ["primary", "审批中"]],
  [8, ["warning", "待发起客户确认"]],
  [9, ["primary", "客户确认中"]],
  [10, ["danger", "客户拒绝"]],
  [11, ["warning", "待收款"]]
]);
// 获取状态 CSS 类名
const getStatusClass = state => {
  const [statusClass] = statusMap.get(state) || ["danger", "--"];
  return `reform-state-${statusClass}`;
};
// 获取状态标签
const getStatusLabel = state => {
  const [, statusLabel] = statusMap.get(state) || ["danger", "--"];
  return statusLabel;
};

const operationArry = [
  { value: 1, label: "创建" },
  { value: 2, label: "判责" },
  { value: 3, label: "撤销审批" },
  { value: 4, label: "审核通过" },
  { value: 5, label: "审批不通过" },
  { value: 6, label: "发起确认" },
  { value: 7, label: "撤销确认" },
  { value: 8, label: " 责任人确认" },
  { value: 9, label: "责任人拒绝" },
  { value: 10, label: "核实" },
  { value: 11, label: "作废" }
];
// const showRefoemState = ref("");
const reformState = ref();
const titleleft = ref("");
const operationRecords = ref([]);
const getDomHeight = async () => {
  await nextTick();
  operationRecords.value.forEach((item, index) => {
    const num = item.picUrls?.split(",").length + item.videoUrls?.split(",").length;
    if (contentDom.value[index].offsetHeight > 45) {
      item.showclick = true;
    } else if (num > 2) {
      item.showclick = true;
    } else {
      delete item.showclick;
    }
  });
};
const shouzhankaishouqi = (item, show, index) => {
  item.showclick = show;
  if (show == true) {
    contentDom.value[index].classList.remove("operate_right_cardcontentshow");
    contentDom.value[index].classList.add("operate_right_cardcontent");
  } else {
    contentDom.value[index].classList.remove("operate_right_cardcontent");
    contentDom.value[index].classList.add("operate_right_cardcontentshow");
  }
};
const getDetail = async () => {
  const { data } = await judgmentDetail(route.query.reformId);
  nameTitle.value = data.afterSalesType === 1 ? "整改" : "增减项";
  detailDate.value = data;
  titleleft.value = data.refusalReason;
  judgemnetArry.value = data.assignBlameDetails;
  judgemnetArry.value.forEach(item => {
    if (item.picUrls !== null) {
      item.imgdata = item.picUrls.split(",").map(url => {
        const fragments = url.trim().split(".");
        const type = fragments[fragments.length - 1];
        return { url: url.trim(), type };
      });
    }
    if (item.videoUrls !== null) {
      item.videodata = item.videoUrls.split(",").map(url => {
        const fragments = url.trim().split(".");
        const type = fragments[fragments.length - 1];
        return { url: url.trim(), type };
      });
    }
  });
  returnOrder.value = data.exchangeOrderDetail?.returnOrder || { itemList: [] };
  if (returnOrder.value.itemList === null) {
    returnOrder.value.itemList = [];
  }
  replacementOrder.value = data.exchangeOrderDetail?.replacementOrder || { itemList: [] };
  if (replacementOrder.value.itemList === null) {
    replacementOrder.value.itemList = [];
  }
  reformState.value = data.reformState;
  operationRecords.value = data.operationRecords;
  operationRecords.value.forEach(item => {
    item.showclick = true;
    if (item.picUrls !== null) {
      item.imgdata = item.picUrls.split(",").map(url => {
        const fragments = url.trim().split(".");
        const type = fragments[fragments.length - 1];
        return { url: url.trim(), type };
      });
    }
    if (item.videoUrls !== null) {
      item.videodata = item.videoUrls.split(",").map(url => {
        const fragments = url.trim().split(".");
        const type = fragments[fragments.length - 1];
        return { url: url.trim(), type };
      });
    }
  });
  await getDomHeight();
};
const showoperation = v => {
  return operationArry.find(item => item.value == v).label;
};
const handleClick = (v, type) => {
  url.value = v;
  showtype.value = type;
  dialogVisible.value = true;
};
const handleClose = () => {
  dialogVisible.value = false;
};

const handleGoto = () => {
  router.go(-1);
};
const handleGotoline = e => {
  if (e) {
    const baseRouter = window.microApp.router.getBaseAppRouter();
    const routeUrl = baseRouter.resolve({
      path: "/designer/quote-price/following/exchangeHistory",
      query: {
        exchangeBudgetId: e
      }
    });
    window.open(routeUrl.href, "_blank");
  }
};
getDetail();
</script>

<style scoped lang="scss">
@use "index";
</style>
